import React, {Component} from "react";
import TodoStore from '../../mobx/ObservableTodoStore';
import {Button, Input} from "antd";
import {observer} from 'mobx-react';
import {observable, computed} from 'mobx';

@observer
class TodoMobx extends Component {
  @observable task2 = '';
  @computed get todoList() {
    return TodoStore.todos.filter(item => !item.completed)
  }

  state = {
    task: '',
  };

  render () {
    let {task} = this.state;

    return (
      <div>
        <h3>setState方式</h3>
        <Input value={task} onChange={(event) => {
          let task = event.target.value;
          this.setState({
            task
          })
        }}/>
        <Button type="primary"
                onClick={() => {
                  TodoStore.addTodo(task)
                  this.setState({
                    task: ''
                  })
                }}
        >添加 Todo</Button>
        <hr/>
        <h3>mobx方式</h3>
        <Input value={this.task2} onChange={(event) => {
          this.task2 = event.target.value
        }}/>
        <Button type="primary"
                onClick={() => {
                  setTimeout(() => {
                    TodoStore.addTodo(this.task2);
                    this.task2 = '';
                  }, 500)
                }}
        >添加 Todo</Button>
        <hr/>
        <h3>Todo 列表</h3>
        <ul>
          {this.todoList.map(item => (
            <li key={item.id}>
              {item.task} <Button onClick={() => {
              item.completed = true;
              console.log(TodoStore.todos);
            }}>完成</Button>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

export default TodoMobx;